<template>
  <div class="tabBar">
    <div class="part1">
      <div class="part11">
        <div class="part11A" v-for="(item, index) in list" :key="index" @click="pageSwich(item)">
          <u-icon :name="iconList[index]" :color="pageName === item.pageName ? '#c7000b' : null" size="22"></u-icon>
          <div class="part112" :class="pageName === item.pageName ? 'part112-on' : null">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pageName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      iconList: ['home', 'account'],
      list: [
        {
          text: '首页',
          pageName: 'HomePage',
        },
        {
          text: '我的',
          pageName: 'MinePage',
        },
      ],
    }
  },
  methods: {
    pageSwich(i) {
      this.$parent.pageName = i.pageName
    },
  },
}
</script>

<style lang="scss" scoped>
.tabBar {
  height: 100rpx;
  .part1 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background: #fff;
    z-index: 200;
    border-top: 1px solid #d7d7d7;
    .part11 {
      display: flex;
      justify-content: space-around;
      .part11A {
        padding-top: 10rpx;
        font-size: 0;
        width: 30%;
        text-align: center;
      }
      .part111 {
        width: 44rpx;
        height: 44rpx;
      }
      .part112 {
        font-size: 26rpx;
        line-height: 26rpx;
        margin-top: 6rpx;
      }
      .part112-on {
        color: #c7000b;
      }
    }
  }
}
</style>
